<template>
  <div class="dropzone">
    <div id="draggable" draggable="true">这个 div 可以拖动</div>
  </div>
  <div class="dropzone" id="droptarget"></div>

  <!-- 天气组件 -->
  <Weather />
  <!--  -->
  <p>tsx使用</p>
  <List :list="list" ref="listRef" @itemClick="itemClick" tilte="测试">
    <slot>'默认插槽'</slot>
    <template #footer="{ data }">
      <span>这是剧名插槽</span>
      <span>{{ data }}</span>
    </template>
  </List>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import { useDrag } from './useDrag'

const {
  elDrag,
  elDragStart,
  elDrageEnd,
  elTargetOver,
  elTargetEnter,
  elTargetLeave,
  elTargetDrop
} = useDrag()

import { Weather } from './Weather'
import { List } from './List'

const list = [
  { name: '张三', id: 1 },
  { name: '李四', id: 2 },
  { name: '王五', id: 3 }
]

const listRef = ref()

onMounted(() => {
  initMount()
})

const initMount = () => {
  const source = document.getElementById('draggable')
  const target = document.getElementById('droptarget')
  elDrag(source as HTMLElement)
  elDragStart(source as HTMLElement)
  elDrageEnd(source as HTMLElement)
  elTargetOver(target as HTMLElement)
  elTargetEnter(target as HTMLElement)
  elTargetLeave(target as HTMLElement)
  elTargetDrop(target as HTMLElement)
}

const itemClick = (val: any) => {
  console.log(val, 'val')
}
</script>

<style scoped>
#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}

.dropzone.dragover {
  background-color: purple;
}

.dragging {
  opacity: 0.5;
}
</style>
